<template>
	<view class="bg main">
		<Header :menuSelect="'报表'" ></Header>
		<view class="container padd-24">
			<uni-row class="demo-uni-row bg-bor">
				<uni-col :span="5">
					<view class="demo-uni-col dis-ai">
						<text>名称：</text>
						<uni-easyinput :styles="styles" type="text" placeholder="名称" />
					</view>
				</uni-col>
				<uni-col :span="5">
					<view class="demo-uni-col dis-ai">
						<text>警报时间：</text>
						<uni-datetime-picker v-model="range" type="daterange" placeholder="请选择" />
					</view>
				</uni-col>
			</uni-row>

			<!-- 表格区域 -->
			<view class="table-content bg-bor">
				<view class="export dis-jc-b">
					<view class="tab-btn dis">
						<template v-for="(item,index) in tabTab" :key="index">
							<text class="padd-8 tag" :class="item==tabSelect?'active':''"
								@click="tabClick(item)">{{item}}</text>
						</template>
					</view>
					<button type="primary" size="mini">导出</button>
				</view>
				<uni-table v-if="tabSelect=='报警报表'" ref="table" :loading="loading" stripe
					@selection-change="e => selectedIndexs = e.detail.index">
					<uni-tr>
						<uni-th align="center">编号</uni-th>
						<uni-th align="center">设备名称</uni-th>
						<uni-th align="center">警报位置</uni-th>
						<uni-th align="center">警报时间</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td align="center">{{ item.number }}</uni-td>
						<uni-td align="center">{{ item.name }}</uni-td>
						<uni-td align="center">{{ item.alarm }}</uni-td>
						<uni-td align="center">{{ item.create }}</uni-td>
					</uni-tr>
				</uni-table>
				<uni-table v-if="tabSelect=='电压电流'" ref="table" :loading="loading" stripe
					@selection-change="e => selectedIndexs = e.detail.index">
					<uni-tr>
						<uni-th align="center">编号</uni-th>
						<uni-th align="center">设备名称</uni-th>
						<uni-th align="center">AB相电压</uni-th>
						<uni-th align="center">BC相电压</uni-th>
						<uni-th align="center">CA相电压</uni-th>
						<uni-th align="center">A相电流</uni-th>
						<uni-th align="center">C相电流</uni-th>
						<uni-th align="center">A相电流</uni-th>
						<uni-th align="center">日期时间</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableVoltage" :key="index">
						<uni-td align="center">{{ item.number }}</uni-td>
						<uni-td align="center">{{ item.name }}</uni-td>
						<uni-td align="center">{{ item.AB }}</uni-td>
						<uni-td align="center">{{ item.BC }}</uni-td>
						<uni-td align="center">{{ item.CA }}</uni-td>
						<uni-td align="center">{{ item.A }}</uni-td>
						<uni-td align="center">{{ item.B }}</uni-td>
						<uni-td align="center">{{ item.C }}</uni-td>
						<uni-td align="center">{{ item.create }}</uni-td>
					</uni-tr>
				</uni-table>

				<!-- 分页器 -->
				<uni-pagination class="page" :current="pageCurrent" :page-size="pageSize" :total="total"
					@change="handlePageChange" />

			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { computed, ref } from 'vue';
	import Header from '@/components/header.vue';

	const range = ref(['2021-02-1', '2021-3-28'])
	const styles = {
		color: '#fff',
		borderColor: '#2979FF',
	}
	const tabTab = ref(['报警报表', '电压电流'])
	// 从外部导入的模拟数据
	const tableData = ref([
		{ id: 0, number: '584468', name: '1号机', create: '2025-08-04 12:09:09', alarm: '风机1' },
		{ id: 1, number: '947577', name: '13号机', create: '2025-08-04 12:09:09', alarm: '风机16' },
		{ id: 2, number: '867977', name: '8号机', create: '2025-08-04 12:09:09', alarm: '风机11' },
		{ id: 3, number: '775966', name: '9号机', create: '2025-08-04 12:09:09', alarm: '风机3' },
	])

	const tableVoltage = ref([
		{ id: 0, number: '584468', name: '1号机', create: '2025-08-04 12:09:09', A: '10A', B: '32KW', C: '23KW', AB: '98KW', BC: '98KW', CA: '56KW' },
		{ id: 1, number: '584468', name: '1号机', create: '2025-08-04 12:09:09', A: '10A', B: '32KW', C: '23KW', AB: '98KW', BC: '98KW', CA: '56KW' },
		{ id: 2, number: '584468', name: '1号机', create: '2025-08-04 12:09:09', A: '10A', B: '32KW', C: '23KW', AB: '98KW', BC: '98KW', CA: '56KW' },
		{ id: 3, number: '584468', name: '1号机', create: '2025-08-04 12:09:09', A: '10A', B: '32KW', C: '23KW', AB: '98KW', BC: '98KW', CA: '56KW' },
		{ id: 4, number: '584468', name: '1号机', create: '2025-08-04 12:09:09', A: '10A', B: '32KW', C: '23KW', AB: '98KW', BC: '98KW', CA: '56KW' },
	])
	const pageSize = ref(10)
	const pageCurrent = ref(1)
	const total = ref(0)
	const loading = ref(false)
	const selectedIndexs = ref<number[]>([])
	const tabSelect = ref('报警报表')
	const tabClick = (e : any) => {
		tabSelect.value = e
	}

	// 多选处理
	const selectedItems = computed(() =>
		selectedIndexs.value.map(i => tableData.value[i])
	)

	// 分页变化
	const handlePageChange = (e : { current : number }) => {
		selectedIndexs.value = []
	}
</script>
<style scoped lang="scss">
	.main {
		height: 100vh;

		.container {

			.demo-uni-row {
				margin-bottom: 32px;

				.demo-uni-col {
					color: #fff;
					font-size: 14px;

					:deep(.is-input-border) {
						width: 240px;
					}

					:deep(.uni-date-x--border) {
						border: 1px solid #2979FF;
						color: #fff;
					}

					:deep(.text-center) {
						color: #fff;
					}

					:deep(.uni-date-x) {
						background: none;
					}
				}

			}

			.table-content {
				.export {
					margin-bottom: 12px;

					.tab-btn {
						flex: 1;

						.tag {
							color: #fff;
						}
					}
				}

				.page {
					margin-top: 12px;
					justify-content: end;
				}

				:deep(.uni-pagination__total) {
					color: #fff;
				}

				:deep(.uni-table-tr) {
					background: $uni-color-theme;
				}

				:deep(.uni-table-th) {
					color: #fff;
				}

				:deep(.uni-table-td) {
					color: #fff;
				}

				:deep(.uni-table-tr:hover) {
					background-color: #175477;
					transition: all 0.3s ease;
				}
			}
		}
	}
</style>